<template>
  <div class="table-box">
    <el-card shadow="hover">
      <template #header>
        <el-row :gutter="10">
          <right-toolbar :search="false" @queryTable="getData"></right-toolbar>
        </el-row>
      </template>

      <el-table :data="tableData" style="width: 100%; height: calc(100% - 40px)" v-loading="tableLoading">
        <el-table-column prop="zhName" label="中文名" align="center" show-overflow-tooltip />
        <el-table-column prop="zhShortName" label="中文简称" align="center" show-overflow-tooltip />
        <el-table-column prop="logo" label="logo" align="center">
          <template #default="scope">
            <el-image :src="getLogo(scope.row.logo)" style="height: 100px"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="briefIntro" label="简介" align="center" show-overflow-tooltip>
          <template v-slot="scope">
            <div v-html="scope.row.briefIntro"></div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template #default="scope">
            <el-tooltip content="详情" placement="top">
              <el-button link type="primary" icon="Document" @click="toDetail(scope.row.id)" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import {listCustomHistory} from "@/api/wiki/customHistory";
import {getLogo} from "@/utils";

const route = useRoute();
const router = useRouter();
const customId = route.query.customId as string;
const tableLoading = ref(false);
const tableData = ref<Record<string, any>[]>([]);
const total = ref(0);
const loading = ref(true);

function toDetail(id: string) {
  router.push({
    name: "customerHistoryDetail",
    query: { id }
  });
}

async function getData() {
  listCustomHistory({ customId }).then((res: any) => {
    tableData.value = res.rows || [];
    total.value = res.total || 0;
  }).finally(() => loading.value = false)
}

getData()
defineComponent({name: 'CustomerHistory'})
</script>

<style scoped lang="scss"></style>
